<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html >
<html itemscope itemtype="http://schema.org/SearchResultsPage">
    <head>
        <link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
        <link rel="publisher" href="http://google.com/+RentpadPhi" />    
        <title>Short Term Rentals in ${model.city.title} - Apartments, Condos, Houses and Rooms</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <meta name="description" content="Search for an apartment, condo, house or a room for short term rent in ${model.city.title}." />        
        <meta name="keywords" content="apartment for rent in ${model.city.title}, ${model.city.title} apartment for rent, condo for rent in ${model.city.title}, ${model.city.title} condo for rent, condominium for rent in ${model.city.title}, ${model.city.title} condominium for rent, house for rent in ${model.city.title}, ${model.city.title} house for rent, room for rent in ${model.city.title}, ${model.city.title} room for rent"/>
        
        <meta property="og:type" content="website"  />
        <meta property="og:url" content="${model.props.appPath}/short-term-rentals/${model.city.title}"  />
        <meta property="og:title" content="Short Term Rentals in ${model.city.title} - Apartments, Condos, Houses and Rooms"  />
        <meta property="og:description" content="Search for an apartment, condo, house or a room for short term rent in ${model.city.title}." />
        <meta property="og:image" content="${model.props.appPath}/img/rentpad-logo-1.png"  />
        
        <meta name="twitter:card" content="summary"/>
        <meta name="twitter:site" value="@rentpadph"/>
        <meta name="twitter:url" content="http://rentpad.com.ph"/>
        <meta name="twitter:title" content="Short Term Rentals in ${model.city.title} - Apartments, Condos, Houses and Rooms"/>
        <meta name="twitter:description" content="Search for an apartment, condo, house or a room for short term rent in ${model.city.title}."/>
        <meta name="twitter:image" content="${model.props.appPath}/img/rentpad-logo-1.png"/>
        
        <meta itemprop="name" content="Short Term Rentals in ${model.city.title} - Apartments, Condos, Houses and Rooms"/>
        <meta itemprop="description" content="Search for an apartment, condo, house or a room for short term rent in ${model.city.title}."/>
        <meta itemprop="keywords" content="apartment for rent in ${model.city.title}, ${model.city.title} apartment for rent, condo for rent in ${model.city.title}, ${model.city.title} condo for rent, condominium for rent in ${model.city.title}, ${model.city.title} condominium for rent, house for rent in ${model.city.title}, ${model.city.title} house for rent, room for rent in ${model.city.title}, ${model.city.title} room for rent" />
        <meta itemprop="image" content="${model.props.appPath}/img/rentpad-logo-1.png"/>
        
        <link rel="stylesheet" href="${model.props.appPath}/css/jquery_mobile/jquery.mobile-1.2.1.min.css" type="text/css"/>
        <script src="${model.props.appPath}/js/jquery/jquery-1.8.3.min.js"></script>
	<script src="${model.props.appPath}/js/jquery_mobile/jquery.mobile-1.2.1.min.js"></script>
        
        <style>
            a {text-decoration:none;} 
            @font-face
            {
                font-family: avant;
                src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
            body  * {
                font-family: avant !important;
            }
        </style>
        <script>
            function switchMenu() {
                if ($('#menu').is(':visible')) {                    
                    $("#menu").hide();
                } 
                else {
                    $("#menu").show();
                }
            }
        </script>
        <script type="text/javascript">
            
            $(function() {
                $('#btn-page-next').closest('.ui-btn').show();
                $('#btn-page-prev').closest('.ui-btn').hide();
                $.mobile.loading('show');
                check();
                
                $("#updateBtn").click( function() {
                    $.mobile.loading('show');
                    resetPaging();
                    check();
                });
                
                $("#btn-page-prev").click( function() {
                    prev();
                });
                
                $("#btn-page-next").click( function() {
                    next()
                });
                    
                $("#select-shortDayRateLow").on("change",function() {
                    $("#shortDayRateLow").val($(this).val());
                });
                
                $("#select-shortDayRateHigh").on("change",function() {
                    $("#shortDayRateHigh").val($(this).val());
                });
                
                $("#select-sqAreaHigh").on("change",function() {
                    $("#sqAreaHigh").val($(this).val());
                });
                
                $("#select-numBedroomsLow").on("change",function() {
                    $("#numBedroomsLow").val($(this).val());
                 });
                 
                 $("#select-numBedroomsHigh").on("change",function() {
                    $("#numBedroomsHigh").val($(this).val());
                 });
             });
            
             function resetPaging() {
                $("#text-items-per-page").val("12");
                $("#text-page-number").val("1");                
             }   
            
             function prev() {                
                var pageNumber = $("#text-page-number").val();
                pageNumber--;
                
                $("#text-page-number").val(pageNumber);
                $.mobile.loading('show');
                check();
                
                $('html, body').animate({
                    scrollTop: $("#searchPage").offset().top
                }, 500);
            }
            
            function next() {
                var pageNumber = $("#text-page-number").val();
                pageNumber++;
                
                $("#text-page-number").val(pageNumber);   
                $.mobile.loading('show');
                check();    
                
                $('html, body').animate({
                    scrollTop: $("#searchPage").offset().top
                }, 500);
            }
            
            function check() {
                var cityName = $("#cityName").val();
                
                var selectedTypes = new Array();
                var selectedFurnishing = new Array();
                var selectedPlaces = new Array();
                var selectedStatus = new Array();
                var selectedAmenities = new Array();
                
                $.each($("input[name='typecbx']:checked"), function() {
                    selectedTypes.push($(this).val());
                });                
//                $.each($("input[name='furnishcbx']:checked"), function() {
//                    selectedFurnishing.push($(this).val());
//                });
//                $.each($("input[name='placecbx']:checked"), function() {
//                    selectedPlaces.push($(this).val());
//                });
//                $.each($("input[name='statuscbx']:checked"), function() {
//                    selectedStatus.push($(this).val());
//                });
//                $.each($("input[name='amenitycbx']:checked"), function() {
//                    selectedAmenities.push($(this).val());
//                });
                
                var shortDayRateLow = $("#shortDayRateLow").val();
                var shortDayRateHigh = $("#shortDayRateHigh").val();
                
//                var sqAreaLow = $( "#sqAreaLow" ).val();
//                var sqAreaHigh = $( "#sqAreaHigh" ).val();
                
                var sqAreaLow = null;
                var sqAreaHigh = null;

                var numBedroomsLow = $( "#numBedroomsLow" ).val();
                var numBedroomsHigh = $( "#numBedroomsHigh" ).val();

//                var numBathroomsLow = $( "#numBathroomsLow" ).val();
//                var numBathroomsHigh = $( "#numBathroomsHigh" ).val();
                
                var numBathroomsLow = null;
                var numBathroomsHigh = null;
                        
                var itemsPerPage = $("#text-items-per-page").val();
                var pageNumber = $("#text-page-number").val();

                search(cityName, shortDayRateLow, shortDayRateHigh, sqAreaLow, sqAreaHigh, numBedroomsLow, numBedroomsHigh, numBathroomsLow, numBathroomsHigh, selectedTypes, selectedFurnishing, selectedPlaces, selectedStatus, selectedAmenities, itemsPerPage, pageNumber);
            }
            
            function search(cityName, shortDayRateLow, shortDayRateHigh, sqAreaLow, sqAreaHigh, numBedroomsLow, numBedroomsHigh, numBathroomsLow, numBathroomsHigh, selectedTypes, selectedFurnishing, selectedPlaces, selectedStatus, selectedAmenities, itemsPerPage, pageNumber) {
                try {
                    $.ajax({
                        type: 'POST',
                        url: "${model.props.appPath}/ws/search.htm",
                        data: {
                            a: "21",
                            cityName: cityName,
                            propertyTypeIDs: "["+selectedTypes+"]",
                            furnishTypeIDs: "["+selectedFurnishing+"]",
                            placeIDs: "["+selectedPlaces+"]",
                            statusTypeIDs: "["+selectedStatus+"]",
                            amenityIDs: "["+selectedAmenities+"]",
                            sqAreaLow: sqAreaLow,
                            sqAreaHigh: sqAreaHigh,
                            shortDayRateLow: shortDayRateLow,
                            shortDayRateHigh: shortDayRateHigh,
                            numBedroomsLow: numBedroomsLow,
                            numBedroomsHigh: numBedroomsHigh,
                            numBathroomsLow: numBathroomsLow,
                            numBathroomsHigh: numBathroomsHigh,
                            itemsPerPage: itemsPerPage,
                            pageNumber: pageNumber,
                            ham: "ham"
                        },
                        timeout : 200000,
                        success: function(data) {
                            try {
                                var host = data.model.host;
                                var port = data.model.port;
                                var rootPath = data.model.props.rootPath;
                                var appPath = data.model.props.appPath;
                                
                                var searchResult = data.model.searchResult;
                                var listings = searchResult.listings;                                
                                var totalListings = searchResult.totalListings;
                                var hasPrev = searchResult.hasPrev;
                                var hasNext = searchResult.hasNext;
                                var featureds = data.model.featureds;
   
                                if (totalListings == 0 || totalListings == 1) {
                                    $("#text-rental").html(' Short Term Rental');
                                } else {
                                    $("#text-rental").html(' Short Term Rentals');
                                }
                                                                //CX: display total count
                                $("#span-listings-count").html(totalListings);
                                
                                //CX: enable / disable prev button                                
                                if (hasPrev) { 
                                    $("#btn-page-prev").removeAttr("disabled"); 
                                    $('#btn-page-prev').closest('.ui-btn').show();
                                }
                                else {                     
                                    $("#btn-page-prev").attr("disabled", true);
                                    $('#btn-page-prev').closest('.ui-btn').hide();
                                }
                                
                                //CX: enable / disable next button
                                if (hasNext) {
                                    $("#btn-page-next").removeAttr("disabled");
                                    $('#btn-page-next').closest('.ui-btn').show();
                                }
                                else {
                                    $("#btn-page-next").attr("disabled", true);
                                    $('#btn-page-next').closest('.ui-btn').hide();
                                }
                                
                                //CX: reflect list view                                                 
                                $("#view-list-outer-mobile").empty();  
                                $("#view-list-outer-mobile").append("<ul id=\"listingsView\" data-role=\"listview\" data-theme=\"c\" id=\"listingsView\"></ul>\n");
                                                                
                                for (var i = 0; i < featureds.length; i++) {
                                    var listing = featureds[i];  
                                    var listingTitle = listing.urlTitle;
                                    var prmaryPhoto="";
                                    var community=" ";
                                    
                                    if (listing.community != null) {
                                        community = listing.community.title;
                                    }
                    
                                    if (listing.primaryPhoto) {
                                        prmaryPhoto = listing.primaryPhoto.filename;
                                    }
                                    
                                    $("#listingsView")
                                            .append("<li style=\"height: 90px; border: 3px solid rgba(131,201,12,0.5);\">\n\
                                                        <a href=\"" + appPath + "/short-term-rentals/${fn:toLowerCase(model.city.title)}/" + listingTitle + "/" + listing.id + "\" data-ajax=\"false\">\n\
                                                        <img src=\""+rootPath+"/uploads/img/002-"+prmaryPhoto+"\" style=\"min-height: 90px; min-width: 120px;\"/>\n\
                                                        <p style=\"display: block; text-align: left; padding-bottom: 2px; margin-left: 30px; font-size: 14px\"><b>"+listing.title+"</b></p>\n\
                                                        <p style=\"text-align: left; margin-left: 30px;\">&#8369; "+listing.shortDayRate+" / Night</p>\n\
                                                        <p style=\"text-align: left; margin-left: 30px;\">"+community+", "+listing.city+"</p>\n\
                                                        <p style=\"text-align: left; margin-left: 30px; color: #339900;\">&#10004; Featured Property</p>\n\
                                                        </a>\n\
                                                    </li>");
                                }
                                
                                for (var i = 0; i < listings.length; i++) {
                                    var listing = listings[i];  
                                    var listingTitle = listing.urlTitle;
                                    var prmaryPhoto="";
                                    var community=" ";
                                    
                                    if (listing.community != null) {
                                        community = listing.community.title;
                                    }
                    
                                    if (listing.primaryPhoto) {
                                        prmaryPhoto = listing.primaryPhoto.filename;
                                    }
                                    
                                    $("#listingsView")
                                            .append("<li style=\"height: 90px;\">\n\
                                                        <a href=\"" + appPath + "/short-term-rentals/${fn:toLowerCase(model.city.title)}/" + listingTitle + "/" + listing.id + "\" data-ajax=\"false\">\n\
                                                        <img src=\""+rootPath+"/uploads/img/002-"+prmaryPhoto+"\" style=\"min-height: 90px; min-width: 120px;\"/>\n\
                                                        <p style=\"display: block; text-align: left; padding-bottom: 2px; margin-left: 30px; font-size: 14px\"><b>"+listing.title+"</b></p>\n\
                                                        <p style=\"text-align: left; margin-left: 30px;\">&#8369; "+listing.shortDayRate+" / Night</p>\n\
                                                        <p style=\"text-align: left; margin-left: 30px;\">"+community+"</p>\n\
                                                        <p style=\"text-align: left; margin-left: 30px; color: #339900;\">"+listing.city+"</p>\n\
                                                        </a>\n\
                                                    </li>");
                                }
                                
                                $("#listingsView").listview().trigger("create");
//                                $('#listingsView').listview('refresh');
                                $('#listingsView ul').listview('refresh');
                                
                                $.mobile.loading('hide');
                            } 
                            
                            catch (e) {
                                //alert("Success error: " + e);
                            }
                        },
                        error : function(xhr, textStatus, errorThrown) {
                            //alert('WS Error: ' + xhr);
                            //alert('WS Error: ' + textStatus);
                            //alert('WS Error: ' + errorThrown);
                        }
                    });
                } catch (e) {
                    alert(e);
                }                 
            }
                       
        </script>
        <script>
            (function(i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function() {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                        m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>
        
    </head>
    
    <body>
        <div data-role="page" data-theme="d" id="searchPage">
            <%@include file="header_mobile.jsp" %> 

            <div data-role="header" data-theme="c">
                <c:choose>
                    <c:when test="${model.searchResult.totalListings == 0 || model.searchResult.totalListings == 1}">
                        <p style="color: #666666; font-size: 20px; text-align: center; padding-right: 40px;"><span id="span-listings-count" style="color: #99CC33;">${model.searchResult.totalListings}</span><b id="text-rental"> Short Term Rental</b></p>      
                    </c:when>
                    <c:otherwise>
                        <p style="color: #666666; font-size: 20px; text-align: center; padding-right: 40px;"><span id="span-listings-count" style="color: #99CC33;">${model.searchResult.totalListings}</span><b id="text-rental"> Short Term Rentals</b></p>
                    </c:otherwise>
                </c:choose>
                <input id="cityName" type="hidden" value="${model.city.title}"/>
                <a style="text-align: right; left: 80%; top: 20%; color: #006699;" href="#filterPopup" data-role="button" data-rel="dialog" data-transition="pop">Filter</a>                   
            </div>

            <div data-role="content">

                <div id="view-list-outer-mobile" style="text-align: center; padding-bottom: 30px"> 
                    <ul data-role="listview" data-theme="c" id="listingsView">
                            
                            <c:forEach items="${model.featureds}" var="listing"> 
                                <li style="height: 90px; border: 3px solid rgba(131,201,12,0.5);">
                                    <a href="${model.props.appPath}/short-term-rentals/${fn:toLowerCase(model.city.title)}/${fn:replace(listing.title, ' ', '-')}/${listing.id}" data-ajax="false" title="${listing.title} For Rent in ${model.city.title}">
                                        
                                        <img itemprop="image" src="${model.props.rootPath}/uploads/img/002-${listing.primaryPhoto.filename}" style="min-height: 90px; min-width: 120px;"/>
                                        <p itemprop="itemOffered" itemscope itemtype="http://schema.org/Product" style="display: block; text-align: left; padding-bottom: 2px; margin-left: 30px; font-size: 14px"><b itemprop="name">${listing.title}</b></p>
                                        
                                        <p style="text-align: left; margin-left: 30px;">
                                            <meta itemprop="priceCurrency" content="PHP" />
                                            <span itemprop="price" >&#8369; ${listing.shortDayRate}</span> / Night
                                        </p>

                                        <c:if test="${listing.community != null}">
                                            <p style="text-align: left; margin-left: 30px;">${listing.community.title}, ${listing.city}</p>
                                            <p style="text-align: left; margin-left: 30px; color: #339900;"></p>  
                                        </c:if>   
                                        
                                        <c:if test="${listing.community == null}">
                                            <p style="text-align: left; margin-left: 30px; color: #339900;">&#10004; Featured Property</p>
                                        </c:if>
                                        
                                    </a>
                                </li>
                            </c:forEach>
                                
                            <c:forEach items="${model.listings}" var="listing"> 
                                <li itemprop="offers" itemscope itemtype="http://schema.org/Offer" style="height: 90px;">
                                    <a href="${model.props.appPath}/short-term-rentals/${fn:toLowerCase(model.city.title)}/${fn:replace(listing.title, ' ', '-')}/${listing.id}" data-ajax="false" title="${listing.title} For Rent in ${model.city.title}">
                                        
                                        <img itemprop="image" src="${model.props.rootPath}/uploads/img/002-${listing.primaryPhoto.filename}" style="min-height: 90px; min-width: 120px;"/>
                                        <p itemprop="itemOffered" itemscope itemtype="http://schema.org/Product" style="display: block; text-align: left; padding-bottom: 2px; margin-left: 30px; font-size: 14px"><b itemprop="name">${listing.title}</b></p>
                                        
                                        <p style="text-align: left; margin-left: 30px;">
                                            <meta itemprop="priceCurrency" content="PHP" />
                                            <span itemprop="price" >&#8369; ${listing.shortDayRate}</span> / Night
                                        </p>

                                        <c:if test="${listing.community != null}">
                                            <p style="text-align: left; margin-left: 30px;">${listing.community.title}</p>
                                            <p style="text-align: left; margin-left: 30px; color: #339900;">${listing.city}</p>  
                                        </c:if>   
                                        
                                        <c:if test="${listing.community == null}">
                                            <p style="text-align: left; margin-left: 30px; color: #339900;">${listing.city}</p>
                                        </c:if>
                                        
                                    </a>
                                </li>
                            </c:forEach>
                    </ul>
                </div>
                
                <c:if test="${model.searchResult.totalListings > 12}">
                <fieldset class="ui-grid-a">
                    <div class="ui-block-a"><a id="btn-page-prev" data-role="button" data-mini="true">Prev</a></div>
                    <div class="ui-block-b"><a id="btn-page-next" data-role="button" data-mini="true">Next</a></div>	   
                </fieldset>
                
                <input id="text-items-per-page" type="hidden" value="12" />
                <input id="text-page-number" type="hidden" value="1" />
                </c:if>

            </div>

            <div data-role="footer" data-position="fixed">
                <%@include file="footer_mobile.jsp" %>      
            </div>  

        </div>
            
       <div data-role="page" id="filterPopup">

            <div data-role="header" data-theme="b">
		<h1>Filter Listings</h1>
            </div>

            <div data-role="content" data-theme="d" style="text-align:center;">	
                
                <form action="" method="">
                                
                                <div data-role="fieldcontain" style="border-bottom: 0px;">
                                    <fieldset data-role="controlgroup">
                                        <legend>Property Type:</legend>
                                            <input type="checkbox" name="typecbx" id="propertyType-2" value="2" class="custom" data-mini="true" />
                                            <label for="propertyType-2">Condo / Apartment</label>
                                            <input type="checkbox" name="typecbx" id="propertyType-1" value="1" class="custom" data-mini="true"/>
                                            <label for="propertyType-1">House</label>
                                    </fieldset>
                                </div>
                              
                                <input id="shortDayRateLow" type="hidden" name="shortDayRateLow" style="width:80px" value="0" />   
                                <input id="shortDayRateHigh" type="hidden" name="shortDayRateHigh" style="width:80px" value="999999" />
                    
                                <div data-role="fieldcontain" style="padding-top: 15px; border-bottom: 0px;">
                                    <fieldset data-role="controlgroup">
                                        <legend>Daily Rate:</legend>
                                        
                                         <select name="select-shortDayRateLow" id="select-shortDayRateLow" data-mini="true" data-native-menu="false">
                                            <option value="0" data-placeholder="true" style="width: 100%;">Min</option>
                                                <option value="0">Min</option>
                                                <option value="1,000">&#8369; 1,000</option>
                                                <option value="3,000">&#8369; 3,000</option>
                                                <option value="5,000">&#8369; 5,000</option>
                                                <option value="7,000">&#8369; 7,000</option>
                                                <option value="10,000">&#8369; 10,000</option>
                                                <option value="15,000">&#8369; 15,000</option>
                                                <option value="20,000">&#8369; 20,000</option>
                                                <option value="30,000">&#8369; 30,000</option>
                                                <option value="999999">Max</option>
                                        </select>
                                         
                                        <select name="select-shortDayRateHigh" id="select-shortDayRateHigh" data-mini="true" data-native-menu="false">
                                            <option value="999999" data-placeholder="true" style="width: 100%;">Max</option>
                                                <option value="0">Min</option>
                                                <option value="1,000">&#8369; 1,000</option>
                                                <option value="3,000">&#8369; 3,000</option>
                                                <option value="5,000">&#8369; 5,000</option>
                                                <option value="7,000">&#8369; 7,000</option>
                                                <option value="10,000">&#8369; 10,000</option>
                                                <option value="15,000">&#8369; 15,000</option>
                                                <option value="20,000">&#8369; 20,000</option>
                                                <option value="30,000">&#8369; 30,000</option>
                                                <option value="999999">Max</option>
                                        </select>                                     
                                    </fieldset>
                                </div>     

                                <input id="numBedroomsLow" type="hidden" name="numBedroomsLow" style="width:80px" value="0" />   
                                <input id="numBedroomsHigh" type="hidden" name="numBedroomsHigh" style="width:80px" value="999" />
                                
<!--                                <div data-role="fieldcontain">
                                    <fieldset data-role="controlgroup">
                                        <legend>Bedrooms:</legend>
                                        
                                        <label for="select-numBedroomsLow" style="text-align: left; font-size: 12px; color: #006699;">Min:</label>
                                        <input type="range" name="select-numBedroomsLow" id="select-numBedroomsLow"  data-role="none" min="0" max="4" value="0" data-mini="true"/>
                                        
                                        <label for="select-numBedroomsHigh" style="text-align: left; font-size: 12px; color: #006699;">Max:</label>
                                        <input type="range" name="select-numBedroomsHigh" id="select-numBedroomsHigh"  data-role="none" min="0" max="4" value="4" data-mini="true"/>
                                    </fieldset>
                                </div>-->

                                <div data-role="fieldcontain" style="padding-top: 15px; border-bottom: 0px;">
                                    <fieldset data-role="controlgroup">
                                        <legend>Bedrooms:</legend>
                                        
                                         <select name="select-numBedroomsLow" id="select-numBedroomsLow" data-mini="true" data-native-menu="false">
                                            <option value="0" data-placeholder="true" style="width: 100%;">Min</option>
                                                <option value="0">Min</option>
                                                <option value="0">0</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="999">Max</option>
                                        </select>
                                         
                                        <select name="select-numBedroomsHigh" id="select-numBedroomsHigh" data-mini="true" data-native-menu="false">
                                            <option value="999" data-placeholder="true" style="width: 100%;">Max</option>
                                                <option value="0">Min</option>
                                                <option value="0">0</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="999">Max</option>
                                        </select>                                     
                                    </fieldset>
                                </div>    
              </form> 
				
		<p><a id="updateBtn" data-theme="b" data-rel="back" data-role="button" data-inline="true" data-icon="refresh">Update List</a></p>	
            </div>
        </div>
    </body>
</html>
